<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品信息</title>

  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
    .el-aside {
      color: #333;
    }
  </style>
</head>
<body>
<div id="app">

  <!--  表单-->

  <el-form :inline="true" :model="brand" class="demo-form-inline">
    <el-form-item label="当前状态">
      <el-select v-model="brand.status" placeholder="当前状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="企业名称">
      <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
    </el-form-item>
    <el-form-item label="品牌名称">
      <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>



  <!--  增加批量删除按钮-->
<!--  <el-row>-->
<!--    <el-button type="danger" plain @click="deleteByIds">删除</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = true" plain>增加</el-button>-->

<!--    <el-dialog-->
<!--        title="编辑品牌"-->
<!--        :visible.sync="dialogVisible"-->
<!--        width="30%"-->
<!--    >-->
<!--      <span><el-form ref="form" :model="brand" label-width="80px">-->
<!--  <el-form-item label="品牌名称">-->
<!--    <el-input v-model="brand.brandName"></el-input>-->
<!--  </el-form-item>-->
<!--  <el-form-item label="企业名称">-->
<!--    <el-input v-model="brand.companyName"></el-input>-->
<!--  </el-form-item>-->
<!--  <el-form-item label="排序">-->
<!--    <el-input v-model="brand.ordered"></el-input>-->
<!--  </el-form-item>-->
<!--  <el-form-item label="备注">-->
<!--    <el-input type="textarea" v-model="brand.description"></el-input>-->
<!--  </el-form-item>-->
<!--   <el-form-item label="状态">-->
<!--    <el-switch v-model="brand.status"-->
<!--               active-value='1'-->
<!--               inactive-value='0'-->
<!--    ></el-switch>-->
<!--  </el-form-item>-->
<!--  <el-form-item>-->
<!--    <el-button type="primary" @click="addBrand">提交</el-button>-->
<!--    <el-button @click="dialogVisible = false">取消</el-button>-->
<!--  </el-form-item>-->
<!--</el-form></span>-->
<!--    </el-dialog>-->
<!--  </el-row>-->


  <!--  表格数据-->
  <template>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          prop="brandName"
          label="品牌名称"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="companyName"
          label="企业名称"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="ordered"
          align="center"
          label="排序">
      </el-table-column>
      <el-table-column
          prop="status"
          align="center"
          label="当前状态">
      </el-table-column>
<!--      <el-table-column-->
<!--          align="center"-->
<!--          label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="primary" @click="lookHandle(scope.row)">修改</el-button>-->
<!--          <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>-->

<!--&lt;!&ndash;          <el-dialog&ndash;&gt;-->
<!--&lt;!&ndash;              title="修改品牌"&ndash;&gt;-->
<!--&lt;!&ndash;              :visible.sync="centerDialogVisible"&ndash;&gt;-->
<!--&lt;!&ndash;              width="30%"&ndash;&gt;-->
<!--&lt;!&ndash;          >&ndash;&gt;-->
<!--&lt;!&ndash;      <span><el-form ref="lookForm" :model="lookForm" label-width="80px">&ndash;&gt;-->
<!--&lt;!&ndash;  <el-form-item label="品牌名称">&ndash;&gt;-->
<!--&lt;!&ndash;    <el-input v-model="lookForm.brandName"></el-input>&ndash;&gt;-->

<!--&lt;!&ndash;  </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;  <el-form-item label="企业名称">&ndash;&gt;-->
<!--&lt;!&ndash;    <el-input v-model="lookForm.companyName"></el-input>&ndash;&gt;-->

<!--&lt;!&ndash;  </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;  <el-form-item label="排序">&ndash;&gt;-->
<!--&lt;!&ndash;    <el-input v-model="lookForm.ordered"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;  </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;  <el-form-item label="备注">&ndash;&gt;-->
<!--&lt;!&ndash;    <el-input type="textarea" v-model="lookForm.description"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;  </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;   <el-form-item label="状态">&ndash;&gt;-->
<!--&lt;!&ndash;    <el-switch v-model="lookForm.status"&ndash;&gt;-->
<!--&lt;!&ndash;               :active-value='1'&ndash;&gt;-->
<!--&lt;!&ndash;               :inactive-value='0'&ndash;&gt;-->
<!--&lt;!&ndash;               center></el-switch>&ndash;&gt;-->
<!--&lt;!&ndash;  </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;  <el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;    <el-button type="primary" @click="updateBrand">提交</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;    <el-button @click="centerDialogVisible = false">取消</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;  </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;</el-form></span>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-dialog>&ndash;&gt;-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </template>
  <!--分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
  </el-pagination>


</div>

<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/element-ui/lib/index.js"></script>

<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">

<script>

  new Vue({
    el: "#app",
    // 页面加载完成后，发送异步请求，查询数据
    mounted() {
      this.selectAll();

    },
    methods: {
      //查询所有商品
      selectAll() {
        var _this = this;
        // axios({
        //   method: "get",
        //   url: "http://localhost:8080/element/brand/selectAll"
        // }).then(function (resp) {
        //   _this.tableData = resp.data;
        // })
        // axios({
        //   method: "get",
        //   url: "http://localhost:8080/element/brand/selectByPage?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
        // }).then(function (resp) {
        //   _this.tableData = resp.data.rows;
        //   console.log(_this.tableData)
        // })
        axios({
          method:"post",
          url:"http://localhost:8080/element/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,

          data:this.brand
        }).then(resp =>{
          //设置表格数据
          this.tableData = resp.data.rows; // {rows:[],totalCount:100}
          //设置总记录数
          this.totalCount = resp.data.totalCount;
        })
      },
      //分页方法

      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.selectAll();
      },
      //页方法
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.selectAll();
      }, handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      onSubmit() {
        console.log(this.brand);
        this.selectAll();
      },
      // addBrand() {
      //   var _this = this;
      //   axios({
      //     method: "post",
      //     url: "http://localhost:8080/element/brand/add",
      //     data: _this.brand
      //   }).then(function (resp) {
      //
      //     if (resp.data == "success") {
      //       _this.dialogVisible = false;
      //       _this.selectAll();
      //
      //       _this.$message({
      //         showClose: true,
      //         message: '添加成功',
      //         type: 'success'
      //       });
      //     }
      //   })
      // },
      // deleteRow(index, rows) {
      //   console.log(rows[index]);
      //   //当前行数据
      //   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     console.log(rows[index]);
      //     var _this = this;
      //     var b = rows[index];
      //     axios({
      //       method: "post",
      //       url: "http://localhost:8080/element/brand/deleteById",
      //       data:b
      //     }).then(function (resp) {
      //       if (resp.data == "success") {
      //         _this.selectAll();
      //         _this.$message({
      //           type: 'success',
      //           message: '删除成功!'
      //         });
      //
      //         //后面完善 自定义方法实现
      //         //_this.rows.splice(_this.index, 1);
      //       }
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     });
      //   });
      // },
      lookHandle(row){
        this.centerDialogVisible = true;

        console.log(row)
        this.lookForm = row;
      },
      // updateBrand(){
      //   var _this = this;
      //   console.log(_this.lookForm);
      //   axios({
      //     method: "post",
      //     url: "http://localhost:8080/element/brand/update",
      //     data: _this.lookForm
      //   }).then(function (resp) {
      //
      //     if (resp.data == "success") {
      //       _this.centerDialogVisible = false;
      //       _this.selectAll();
      //
      //       _this.$message({
      //         showClose: true,
      //         message: '修改成功',
      //         type: 'success'
      //       });
      //     }
      //   })
      // },
      // deleteByIds(){
      //
      //
      //
      //   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     for (let i = 0; i < this.multipleSelection.length; i++) {
      //       let selectionElement = this.multipleSelection[i];
      //       this.selectIds[i] = selectionElement.id;
      //     }
      //
      //     var _this = this;
      //     axios({
      //       method: "post",
      //       url: "http://localhost:8080/element/brand/deleteByIds",
      //       data: _this.selectIds
      //     }).then(function (resp) {
      //
      //       if (resp.data == "success") {
      //         _this.selectAll();
      //
      //         _this.$message({
      //           showClose: true,
      //           message: '批量删除成功',
      //           type: 'success'
      //         });
      //       }
      //     })
      //
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     });
      //   });
      // }
    },
    data() {

      return {
        //增加按钮的对话框
        dialogVisible: false,
        centerDialogVisible: false,
        //表单数据
        brand: {
          id: '',
          brandName: '',
          companyName: '',
          ordered: '',
          description: '',
          status: ''
        },
        lookForm: {
          id: '',
          brandName: '',
          companyName: '',
          ordered: '',
          description: '',
          status: ''
        },
        //复选框数据
        selectIds:[],
        //复选框提交
        multipleSelection: [],
        // 每页显示的条数
        pageSize:5,
        // 总记录数
        totalCount:100,
        // 当前页码
        currentPage: 1,
        //商品模型(json)
        tableData: [{
          brandName: '',
          companyName: '',
          ordered: '',
          status: ""
        }]
      }
    }
  })
</script>
</body>
</html>